1
00:00:00,660 --> 00:00:10,830
Hello and welcome to the part two of creating the Happe functionality using javascript.

2
00:00:10,830 --> 00:00:13,170
I have two functions here.

3
00:00:13,170 --> 00:00:19,880
The first function is called calev default from line 22 to 25.

4
00:00:20,130 --> 00:00:23,360
What this function will do it all clear.

5
00:00:23,430 --> 00:00:32,700
For example once you've typed in a task and it will check to make sure that the task is still not hanging

6
00:00:32,700 --> 00:00:34,590
around in the input box.

7
00:00:34,590 --> 00:00:36,590
So that's what this value is me.

8
00:00:36,750 --> 00:00:39,360
Any values in there it is.

9
00:00:39,390 --> 00:00:46,380
If this is a value a default value is true to you want to see the value.

10
00:00:46,380 --> 00:00:51,500
They include the value and set the value which is a value because to make it blank.

11
00:00:51,810 --> 00:00:52,430
That's what it is.

12
00:00:52,430 --> 00:01:00,360
So he's basically to clear any import that is left hanging around after you've added a task so that's

13
00:01:00,360 --> 00:01:02,300
what that function is there for.

14
00:01:02,610 --> 00:01:03,320
Okay.

15
00:01:03,450 --> 00:01:12,340
The second function which is called the remove function from line 27 to 236.

16
00:01:12,570 --> 00:01:13,170
All right.

17
00:01:13,290 --> 00:01:16,040
So what you remove from Channel will do.

18
00:01:16,040 --> 00:01:25,290
It is called When the user clicks on any of the task to remove them so they click on the remove button

19
00:01:25,680 --> 00:01:27,410
on the task they no longer need.

20
00:01:27,420 --> 00:01:36,830
It will remove the removed button will trigger the function and the item will be removed.

21
00:01:37,190 --> 00:01:38,420
All right.

22
00:01:38,820 --> 00:01:45,060
So this function contains two variables variable Heidi which is set equal to a D.

23
00:01:45,100 --> 00:01:53,350
Don't get attribute this refers to the quadrent Dom element which is being removed as of the time the

24
00:01:53,370 --> 00:01:55,930
user clicks on the remote button.

25
00:01:56,040 --> 00:02:05,330
Okay so we'd retrieve the retrieve the value of this did attribute using the get attribute method.

26
00:02:05,520 --> 00:02:14,260
Okay this is the index of this specific to do item among the to do items in the database.

27
00:02:14,400 --> 00:02:24,390
Okay so after retrieving the current list off to do I will use the splice method to remove a specific

28
00:02:24,540 --> 00:02:33,000
element from the javascript hurry back and we store the new task back in the database so you use push

29
00:02:33,300 --> 00:02:36,830
to append and then use splice to remove.

30
00:02:36,920 --> 00:02:44,550
Okay so once the item has been removed we use the splice metal to remove that idae and then store what's

31
00:02:44,550 --> 00:02:46,770
left in local storage.

32
00:02:46,980 --> 00:02:49,650
Okay that's basically what this function done.

33
00:02:49,680 --> 00:02:54,720
I notice again with core this schull function here is not defined yet again.

34
00:02:54,730 --> 00:02:56,800
It's your form John what it called.

35
00:02:56,910 --> 00:03:05,250
It will show what's in the database and we've set a return value so that nothing else is triggered after

36
00:03:05,250 --> 00:03:14,010
the show function has been called the final function and we are going to create this this one here called

37
00:03:14,020 --> 00:03:20,380
the show we have been calling we've call this function several times within their functions.

38
00:03:20,550 --> 00:03:29,100
Here we where we actually defined the function the function will display the current to do list stored

39
00:03:29,220 --> 00:03:30,550
in the database.

40
00:03:30,710 --> 00:03:36,630
Okay so if you notice the first thing it does on line 39 with a variable here.

41
00:03:36,700 --> 00:03:39,630
Is it cause they get to dos.

42
00:03:39,790 --> 00:03:51,120
Okay so you caused to get to do is to get the list off a tree of to do items regardless if they are

43
00:03:51,140 --> 00:03:54,640
empty or not on line 41.

44
00:03:54,640 --> 00:04:03,420
We've got a variable quad hastier mail and said it was for the value of a tag which is an or an ordered

45
00:04:03,540 --> 00:04:04,440
list.

46
00:04:04,440 --> 00:04:13,980
So here we manually creatine snippet of some hastier MIL tag from these variable using the variable

47
00:04:13,980 --> 00:04:15,690
to set the value.

48
00:04:15,870 --> 00:04:23,370
Okay so the UI element is an order list who was so set it up with on or at least they need to have an

49
00:04:23,460 --> 00:04:25,750
airline item which is a list act.

50
00:04:26,040 --> 00:04:30,990
So this will be a list item for each of the to do entry.

51
00:04:31,110 --> 00:04:41,200
In addition to the content of the to dos array I've also added botan to each of the list items.

52
00:04:41,400 --> 00:04:44,100
Okay so you can see here added a button.

53
00:04:44,100 --> 00:04:51,240
This button will be added as a cluster to be added to each of the list item so as you add a task it

54
00:04:51,240 --> 00:04:58,830
will automatically insert a button that users can use to remove the task if they no longer require the

55
00:04:58,830 --> 00:04:59,470
task.

56
00:05:00,000 --> 00:05:08,370
So each of the button belongs to a class cord and remove and each button has an I.D. containing the

57
00:05:08,430 --> 00:05:14,180
index of the to do item in the list retrieved from the database.

58
00:05:14,330 --> 00:05:14,980
Okay.

59
00:05:16,680 --> 00:05:21,200
So the button's well enabled the users to remove the item.

60
00:05:21,330 --> 00:05:34,570
They no longer require from the list on line 47 the documents get elemen i.d. inside the value passed

61
00:05:34,670 --> 00:05:35,920
it to do.

62
00:05:36,300 --> 00:05:46,110
What that will do is to will insert their newly generated haish thier mail snippet in the original load

63
00:05:46,140 --> 00:05:50,170
in the original document loaded from the server.

64
00:05:50,350 --> 00:05:53,400
Alright so even light inserted inside hastier out.

65
00:05:53,670 --> 00:05:59,450
It actually replaces the content of the element with the idea to dos.

66
00:05:59,550 --> 00:06:00,630
That's what that meant.

67
00:06:00,730 --> 00:06:10,370
Okay this means in subsequent calls it will just show the new list regardless of what was there earlier.

68
00:06:10,380 --> 00:06:12,070
That's basically what it does.

69
00:06:12,180 --> 00:06:20,760
The in a statement labels it to do that in the next couple of lines from forward in line all the way

70
00:06:20,790 --> 00:06:22,920
to 51.

71
00:06:23,120 --> 00:06:28,110
So the get elemen by class name.

72
00:06:28,260 --> 00:06:36,750
This method is used to fetch all the buttons that are in the remove class.

73
00:06:36,750 --> 00:06:44,640
So these are the buttons we have we added previously added to each of you to do item and ball so took

74
00:06:44,730 --> 00:06:45,890
each button.

75
00:06:46,080 --> 00:06:53,090
We assign a event listener that will listen out for any.

76
00:06:53,090 --> 00:06:54,570
Click on the button.

77
00:06:54,570 --> 00:06:57,590
When that happens it will be triggered.

78
00:06:57,960 --> 00:06:58,470
Okay.

79
00:06:58,500 --> 00:07:03,600
Once a user clicks it will be triggered and the connect.

80
00:07:03,600 --> 00:07:08,480
When the user clicks on a button it triggers off the function.

81
00:07:10,670 --> 00:07:13,460
Was the click it's done.

82
00:07:13,610 --> 00:07:18,690
The list now triggers of the function the item is down removed.

83
00:07:20,490 --> 00:07:22,380
As you can see here we've passed it.

84
00:07:22,440 --> 00:07:26,720
The click is event the remove is the function.

85
00:07:27,060 --> 00:07:30,410
Okay so this is event where you attach an event list.

86
00:07:30,420 --> 00:07:34,880
Now there must be Param if there's past one would be the first would be the event you'll listen in out

87
00:07:34,890 --> 00:07:35,530
for.

88
00:07:35,730 --> 00:07:39,170
And this second would be the function that would be triggered.

89
00:07:39,180 --> 00:07:40,430
When that occurs.

90
00:07:40,590 --> 00:07:44,570
So when that causes remove function all come into play.

91
00:07:44,620 --> 00:07:53,900
And the item will be removed via the button like 55 year old documents don't get element by eidy and

92
00:07:53,900 --> 00:08:01,410
move past the idea ad which is the task when you add in the task it got an even bigger event list attached

93
00:08:01,410 --> 00:08:02,570
to it as well.

94
00:08:02,790 --> 00:08:10,670
So what happens when you add a task for example and you click if you click on the task but I've added

95
00:08:10,670 --> 00:08:18,900
it it all use it would trigger this function call and then core this show function here.

96
00:08:18,900 --> 00:08:25,550
All right so was that is done is show function here will be called and the list of items will be displayed.

97
00:08:25,800 --> 00:08:33,300
So that's set for the Java's group called so I'll save that and if we run our app we should get it working

98
00:08:33,300 --> 00:08:34,270
now.

99
00:08:34,980 --> 00:08:37,470
All right so this is our app complete.

100
00:08:37,500 --> 00:08:42,940
Let's do some tests and see as too.

101
00:08:47,000 --> 00:08:49,120
Pair lose two bet.

102
00:08:52,750 --> 00:08:57,580
Okay go.

103
00:08:57,730 --> 00:09:00,100
Thanks.

104
00:09:01,210 --> 00:09:03,980
Okay so say blackfire refresh.

105
00:09:04,300 --> 00:09:07,370
You can see the daytime's to persistent.

106
00:09:07,370 --> 00:09:10,990
All right so we can just click to delete if we no longer need that.

107
00:09:10,990 --> 00:09:12,480
And that will disappear.

108
00:09:12,490 --> 00:09:17,370
So now let me let's see where this data is actually saved.

109
00:09:17,560 --> 00:09:24,480
So you know where to look if you need to to check where the data is stored.

110
00:09:24,730 --> 00:09:28,490
You click on F 12 on your keyboard.

111
00:09:28,990 --> 00:09:33,630
So they have 12 key should bring up a screen like this.

112
00:09:33,760 --> 00:09:36,230
Make sure you've got a tab code resources.

113
00:09:36,250 --> 00:09:37,000
If you can see.

114
00:09:37,000 --> 00:09:38,500
Just expand it.

115
00:09:38,650 --> 00:09:42,270
And if you see a list and I am using Google Chrome.

116
00:09:42,400 --> 00:09:46,720
So once you click on resources you should get this list item here.

117
00:09:46,930 --> 00:09:50,140
These are the databases on the local storage.

118
00:09:50,140 --> 00:09:57,940
You expand that and click on file so you can see here the key because local storage stores data using

119
00:09:57,970 --> 00:10:00,300
the key and then a value.

120
00:10:00,340 --> 00:10:02,510
So the key here is to do.

121
00:10:02,920 --> 00:10:03,320
Okay.

122
00:10:03,370 --> 00:10:05,190
Which is this list.

123
00:10:05,260 --> 00:10:06,710
These are the values you see.

124
00:10:06,720 --> 00:10:12,120
And even more lists I add on here we just get upended here so you can see the value here.

125
00:10:12,120 --> 00:10:13,140
Is this one.

126
00:10:13,320 --> 00:10:17,620
So if not that's a let me say discount.

127
00:10:20,610 --> 00:10:25,550
Unlikely add and I refresh my browser.

128
00:10:26,040 --> 00:10:27,550
You see the discount there.

129
00:10:27,570 --> 00:10:28,810
It's popped up there.

130
00:10:28,830 --> 00:10:31,320
All right so you just does them as an array.

131
00:10:31,320 --> 00:10:33,860
You can see the the square brackets.

132
00:10:34,080 --> 00:10:35,820
So restores them as an array.

133
00:10:35,820 --> 00:10:38,750
So that's basically where your eyes turn.

134
00:10:38,760 --> 00:10:40,930
Our store fully to do list.

135
00:10:41,070 --> 00:10:43,640
So that's it for the project.

136
00:10:43,650 --> 00:10:44,840
Thanks for watching.

137
00:10:44,910 --> 00:10:47,160
I hope he's going to be useful to you.

138
00:10:47,160 --> 00:10:52,260
This is a practical tool that you can use yourself or share with others.

139
00:10:52,260 --> 00:10:53,550
Thanks for watching.

140
00:10:53,550 --> 00:10:54,260
Bye for now.